<!-- 左边菜单  -->
<template>
  <div class="no-scrollbar" style="width: 100%; height: 100vh;">
    <div class="logobox">
      <div
        v-if="collapsed"
        class="el-icon-position"
        style="width: 100px;height: 60px;display: flex;justify-content: center;align-items: center;"
      ></div>
      <el-image
        v-if="!collapsed"
        fit="cover "
        style="width: 100px;height: 100px;"
        src="http://applet.atptest.com/D9EfqeOA1719887232768.png?v=1719887233259"
        alt=""
      ></el-image>
    </div>
    <el-menu
      :collapse="collapsed"
      collapse-transition
      router
      :default-active="$route.path"
      unique-opened
      class="el-menu-vertical-demo"
      text-color="#555"
      active-text-color="#fff"
      style="width: 100%;"
    >
      <template v-for="(item, index) in allmenu">
        <el-submenu
          v-if="item.children && !item.hasRole"
          :key="index + item.menuid"
          :index="'/' + item.url"
          style="width: 100% !important;"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span style="font-size: 16px;">{{ item.menuname }}</span>
          </template>
          <el-menu-item
            v-if="!it.hasRole"
            v-for="(it, inx) in item.children"
            :key="inx + it.menuid"
            :index="'/' + it.url"
            style="width: 100% !important;"
          >
            <template slot="title">
              <i :class="it.icon && it.icon"></i>
              <span style="font-size: 16px;">{{ it.menuname }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
        <el-menu-item
          v-if="!item.children && !item.hasRole"
          :index="'/' + item.url"
          style="width: 100% !important;"
        >
          <i :class="item.icon"></i>
          <span style="font-size: 16px;">{{ item.menuname }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "leftnav",
  data() {
    return {
      collapsed: false,
      allmenu: [],
      paddingLeft: "20px"
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    let info = JSON.parse(localStorage.getItem("info"));
    // 获取图形验证码

    let routrData = [
      {
        menuid: 71,
        icon: "iconfont icon-dingdanjihe",
        menuname: "订单管理",
        hasRole: true,
        url: "system/user",
        role: "OrderManagement",
        children: [
          {
            menuid: 72,
            icon: "iconfont icon-dingdanjihe",
            menuname: "订单管理",
            hasRole: true,
            url: "system/user",
            role: "CommodityManagement"
          },
          {
            menuid: 73,
            icon: "iconfont icon-peizhiguanli",
            menuname: "判断说明内容配置",
            hasRole: true,
            url: "system/explaindiSposition",
            role: "CommodityManagement"
          }
        ]
      },
      {
        menuid: 1,
        icon: "iconfont icon-31quanbushangpin",
        menuname: "商品管理",
        hasRole: true,
        url: "goods/Goods",
        role: "CommodityManagement",
        children: [
          {
            menuid: 1,
            icon: "iconfont icon-31quanbushangpin",
            menuname: "商品管理",
            hasRole: true,
            url: "goods/Goods",
            role: "CommodityManagement"
          },
          {
            menuid: 122,
            icon: "iconfont icon-pinpai",
            menuname: "品牌管理",
            hasRole: true,
            url: "brand/brand",
            role: "BrandManagement"
          },
          {
            menuid: 123,
            icon: "iconfont icon-chandiguanli_icox",
            menuname: "产地管理",
            hasRole: true,
            url: "place/place",
            role: "ProducerManagement"
          },
          {
            menuid: 124,
            icon: "iconfont icon-oslv_container",
            menuname: "封装管理",
            hasRole: true,
            url: "encapsulation/encapsulation",
            role: "PackageManagement"
          }
        ]
      },
      {
        menuid: 128,
        icon: "iconfont icon-yonghuguanli",
        menuname: "用户管理",
        hasRole: true,
        url: "machine/MachineConfig",
        role: "UserManagement",
        children: [
          {
            menuid: 128,
            icon: "iconfont icon-list",
            menuname: "用户列表",
            hasRole: true,
            url: "machine/MachineConfig",
            role: "UserList"
          },
          {
            menuid: 71,
            icon: "iconfont icon-gongsiguanli",
            menuname: "公司管理",
            hasRole: true,
            url: "company/index",
            role: "CompanyManagement"
          },
          {
            menuid: 1308,
            icon: "iconfont icon-shenqingquanxian",
            menuname: "标签管理",
            hasRole: true,
            url: "tag/index",
            role: "LabelManagement"
          },
          {
            menuid: 124,
            icon: "iconfont icon-fankui",
            menuname: "用户反馈",
            hasRole: true,
            url: "feedback/feedback"
          },
          {
            menuid: 125,
            icon: "iconfont icon-pingjia",
            menuname: "用户评价",
            hasRole: true,
            url: "evaluate/evaluate"
          }
        ]
      },

      {
        menuid: 189,
        icon: "iconfont icon-chongzhi2",
        menuname: "充值管理",
        hasRole: true,
        url: "recharge/rechargeList",
        role: "RechargeManagement",
        children: [
          {
            menuid: 129,
            icon: "iconfont icon-chongzhijilu",
            menuname: "充值列表",
            hasRole: true,
            url: "recharge/rechargeList",
            role: "RechargeList"
          },
          {
            menuid: 188,
            icon: "iconfont icon-chongzhi1",
            menuname: "充值设置",
            hasRole: true,
            url: "recharge/setRecharge",
            role: "SetRecharge"
          }
        ]
      },
      {
        menuid: 189,
        icon: "iconfont icon-tuikuan",
        menuname: "退款管理",
        hasRole: true,
        url: "refund/index",
        role: "RefundManagement"
      },
      {
        menuid: 121,
        icon: "iconfont icon-youhuiquan",
        menuname: "优惠券管理",
        hasRole: true,
        url: "coupon/index",
        role: "CouponManagement"
      },
      {
        menuid: 122,
        icon: "iconfont icon-kanjia",
        menuname: "砍价管理",
        hasRole: true,
        url: "bargain/index",
        role: "BargainManagement"
      },
      {
        menuid: 165,
        icon: "iconfont icon-libao",
        menuname: "礼包管理",
        hasRole: true,
        url: "giftPack/giftPack",
        role: "GiftManagement",
        children: [
          {
            menuid: 166,
            icon: "iconfont icon-libao",
            menuname: "礼包管理",
            hasRole: true,
            url: "giftPack/giftPack",
            role: "GiftManagement"
          },
          {
            menuid: 167,
            icon: "iconfont icon-chongzhisongyue",
            menuname: "礼包流水",
            hasRole: true,
            url: "giftRecord/giftRecord",
            role: "GiftManagement"
          }
        ]
      },
      {
        menuid: 1801,
        icon: "iconfont icon-bianjiwenzhang_huaban",
        menuname: "签到活动",
        hasRole: true,
        url: "signActivity/sign",
        role: "SignActivityManagement",
        children: [
          {
            menuid: 1801166,
            icon: "iconfont icon-pingjia",
            menuname: "报名管理",
            hasRole: true,
            url: "signActivity/sign",
            role: "SignList"
          },
          {
            menuid: 1801167,
            icon: "iconfont icon-oslv_container",
            menuname: "活动管理",
            hasRole: true,
            url: "signActivity/activity",
            role: "ActivityList"
          }
        ]
      },
      {
        menuid: 185,
        icon: "iconfont icon-kongzhitai",
        menuname: "系统管理",
        hasRole: true,
        role: "GiftManagement",
        url: "authority/index",
        children: [
          {
            menuid: 13033,
            icon: "iconfont icon--quanxianguanli",
            menuname: "账号管理",
            hasRole: true,
            url: "authority/index"
          },

          {
            menuid: 33,
            icon: "iconfont icon-shenfen",
            menuname: "身份管理",
            hasRole: true,
            url: "setIdentity/SetIdentity",
            role: "IdentityManagement"
          },
          {
            menuid: 1899,
            icon: "iconfont icon-bianjiwenzhang_huaban",
            menuname: "文章管理",
            hasRole: true,
            url: "article/index",
            role: "ArticleManagement"
          },

          {
            menuid: 1281,
            icon: "iconfont icon-shouyeguanli",
            menuname: "首页管理",
            hasRole: true,
            url: "setHomeImg/index",
            role: "PageManagement"
          },
          {
            menuid: 1213,
            icon: "iconfont icon-kongzhitai",
            menuname: "控制管理",
            hasRole: true,
            url: "setting/set"
          },
          {
            menuid: 125,
            icon: "iconfont icon-fapiaoguanli",
            menuname: "开票记录",
            hasRole: true,
            url: "invoice/invoice"
          }
        ]
      },
      {
        menuid: 126,
        icon: "iconfont icon-fenxiao",
        menuname: "分销管理",
        hasRole: true,
        url: "distribution/distribution",
        role: "DistributionManagement",
        children: [
          {
            menuid: 127,
            icon: "iconfont icon-fenxiao",
            menuname: "分销管理",
            hasRole: true,
            url: "distribution/distribution",
            role: "DistributionManagement"
          },
          {
            menuid: 1300,
            icon: "iconfont icon-shenhe",
            menuname: "分销商审核管理",
            hasRole: true,
            url: "distribution/distributionCheck",
            role: "DistributionManagement"
          },
          {
            menuid: 13001,
            icon: "iconfont icon-tixian",
            menuname: "提现审核管理",
            hasRole: true,
            url: "distribution/withdrawCheck",
            role: "DistributionManagement"
          },
          {
            menuid: 131,
            icon: "iconfont icon-liushui",
            menuname: "流水列表",
            hasRole: true,
            url: "accountStatement/accountStatement",
            role: "DistributionManagement"
          }
        ]
      },
      {
        menuid: 132,
        icon: "iconfont icon-huiyishi",
        menuname: "会议室管理",
        hasRole: true,
        url: "meeting/meeting",
        role: "MettingManagement",
        children: [
          {
            menuid: 133,
            icon: "iconfont icon-huiyishi",
            menuname: "会议室管理",
            hasRole: true,
            url: "meeting/meeting",
            role: "MettingManagement"
          },
          {
            menuid: 134,
            icon: "iconfont icon-fankui",
            menuname: "会议室记录",
            hasRole: true,
            url: "meetingRecord/meetingRecord",
            role: "MettingManagement"
          }
        ]
      },
      {
        menuid: 1219,
        icon: "iconfont icon-wxbbaobiao",
        menuname: "统计中心",
        hasThird: null,
        hasRole: true,
        url: "report/index",
        role: "ReportCenter"
      }
    ];

    /**
     * 这里根据登入返回的权限做动态路由的显示。
     * 注意超级管理员是可以看见所以，而且只有超级管理员才有账号管理和控制管理的权限。
     *  isAdministrator 超级管理员
     *  hasRole 当前路由是否有权限访问
     *  allmenu 有权限的路由
     */

    let roleList = info.auth; // 拿到权限列表数据
    if (!info.isAdministrator) {
      // 不是超级管理员
      routrData.forEach(el => {
        if (el.children) {
          // 二级菜单路由
          for (let index = 0; index < el.children.length; index++) {
            let element = el.children[index];
            if (roleList.includes(element.role)) {
              element.hasRole = false;
            }
          }
        }
        // 一级菜单路由
        if (roleList.includes(el.role)) {
          el.hasRole = false;
        }
      });
    } else {
      // 超级管理员 默认拥有全部的权限
      routrData.forEach(el => {
        if (el.children) {
          for (let index = 0; index < el.children.length; index++) {
            let element = el.children[index];
            element.hasRole = false;
          }
        }
        el.hasRole = false;
      });
    }
    this.allmenu = routrData;
    // 监听
    this.$root.Bus.$on("toggle", value => {
      this.collapsed = !value;
      console.log("aaa", this.collapsed);
      if (!this.collapsed) {
        this.paddingLeft = "20px";
      } else {
        this.paddingLeft = "0px !important";
      }
    });
  }
};
</script>
<style>
.el-aside::-webkit-scrollbar {
  display: none;
  min-height: 100vh;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 300px;
  height: 80vh;
  overflow-y: scroll;
  background-size: cover;
  background-position: center;
  font-weight: 500;
  border: none;
  text-align: left;
  border-bottom: 2px solid #072c56;
}

.el-menu-item-group__title {
  padding: 0px;
}
.el-menu {
  background: url("http://applet.atptest.com/BC6M0oHa1686103790718.png?v=1686103793439")
    no-repeat;
}

.el-menu-item {
  font-size: 18px !important;
  color: #fff !important;
}

/* 选中的背景颜色*/
.el-menu-item.is-active {
  background-color: rgba(97, 121, 173, 0.4) !important;
  font-weight: 500;
}

.el-menu-item.is-active i {
  color: #409eff !important;
}

/* 选中的蚊子颜色*/
.el-menu-item.is-active span {
  color: #409eff !important;
  font-size: 16px !important;
}

.el-menu {
  border: none;
}

.iconfont {
  margin: 0 15px;
  color: #fff !important;
  font-weight: 500;
  font-size: 20px;
}

/* 改变elementui 侧边栏移入颜色 */
.el-submenu .el-submenu__title {
  color: #fff !important;
}
.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff !important;
}

/* 去除滚动条但仍然可以滚动 */
.no-scrollbar {
  position: relative;
  background: url("http://applet.atptest.com/BC6M0oHa1686103790718.png?v=1686103793439")
    no-repeat;
  overflow: auto; /* 保证内容仍然可以滚动 */
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}

.logobox {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  border-bottom: 2px solid #072c56;
}
</style>
